<template>
  <div class="nav">
    <ul class="nav-ul">
      <li>
        <router-link to="/home/bookquery"><el-icon><reading /></el-icon>图书查询</router-link>
      </li>
      <li>
        <router-link to="/home/bookmanage"><el-icon><briefcase /></el-icon>图书管理</router-link>
      </li>
      <li>
        <router-link to="/home/borrow"><el-icon><management /></el-icon>借阅历史</router-link>
      </li>
      <li>
        <router-link to="/home/user"><el-icon><user-filled /></el-icon>用户管理</router-link>
      </li>
      <li>
        <router-link to="/home/reader"><el-icon><avatar /></el-icon>读者管理</router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.nav {
  width: 200px;
  height: 661px;
  background: #333744;
  .nav-ul {
    width: 100%;
    height: 100%;
    list-style-type: none;
  }
  .nav-ul li{
    width: 100%;
    height: 70px;
    text-align: center;
    line-height: 70px;
    font-size: 17px;
    font-family: '宋体';
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.83);
    cursor: pointer;
    .el-icon {
      margin-right:20px;
      text-align: center;
    }
    a {
      display: block;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.83);
      &:hover {
        color: #fff;
      }
    }
  }
}



// 设置路由高亮效果
.router-link-active {
  box-sizing: border-box;
  position: relative;
  display: block;
  border-left: 5px solid #42b983;
  font-size: 18px;
  background: #292c36;
  .el-icon {
    color: #42b983;
  }
  // &::before {
  //   content: ' ';
  //   display: block;
  //   width: 4px;
  //   height: 69px;
  //   position: absolute;
  //   left: -42px;
  //   top: -24px;
  //   font-size: 17px;
  //   background-color: #42b983;
  // }
}
.router-link-active a {
  color: #fff;
}
</style>